<!--用于渲染图表点击之后的弹窗-->
<template>
  <el-dialog
          width="520px"
          title="节点详细信息"
          :modal-append-to-body="false"
          :visible.sync="dialogVisible"
  >
    <div style="transform-origin: 195px 318px;">
      <div class="ant-modal-body" style="height: 520px;max-height: 450px;overflow-y: auto;">
        <div style="height: 200px;box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04)">
          <el-row class="border-bottom_line">
            <el-col :span="12"
                    style="height: 70px;padding: 10px 10px 10px 20px;line-height: 50px;font-weight: bold;">
              {{dialogData.name}}
            </el-col>
            <el-col :span="7" style="height: 70px;padding: 10px 0px 10px 0px;">
              <div class="border-left_line" style="padding: 0px 10px 0px 20px;line-height: 50px;">
                合计<span style="font-weight: bold;margin-left: 10px;font-size: 16px;">{{dialogData.total}}</span>
              </div>
            </el-col>
            <el-col :span="5" style="height: 70px;padding: 10px 0px 10px 0px;">
              <div class="border-left_line" style="padding: 0px 20px 0px 20px;line-height: 50px;">
                <el-button type="primary" icon="el-icon-user"></el-button>
              </div>
            </el-col>
          </el-row>
          <el-row style="height: 40px">
            <el-col :span="13" style="height: 20px;padding: 0px 10px 0px 20px;line-height: 40px;">
              名称
            </el-col>
            <el-col :span="4" style="height: 20px;padding: 0px 0px 0px 0px;">
              <div style="padding: 0px 10px 0px 10px;line-height: 40px;text-align: right;">
                会话数
              </div>
            </el-col>
            <el-col :span="4" style="height: 20px;padding: 0px 0px 0px 0px;">
              <div style="padding: 0px 10px 0px 10px;line-height: 40px;text-align: right;">
                比例
              </div>
            </el-col>
            <el-col :span="3" style="height: 20px;padding: 0px 0px 0px 0px;">
              <div style="padding: 0px 10px 0px 10px;line-height: 40px;text-align: center;">
                操作
              </div>
            </el-col>
          </el-row>
          <el-row style="height: 40px">
            <el-col :span="13" style="padding: 0px 10px 0px 20px;line-height: 40px;">
              <div style="display: inline-block;background-color: #488bff;border-radius: 10px;width: 8px;height: 8px"></div>
              <span style="margin-left: 10px">留存</span>
            </el-col>
            <el-col :span="4" style="padding: 0px 0px 0px 0px;">
              <div style="padding: 0px 10px 0px 10px;line-height: 40px;text-align: right;">
                {{dialogData.detail.storageNum}}
              </div>
            </el-col>
            <el-col :span="4" style="padding: 0px 0px 0px 0px;">
              <div style="padding: 0px 10px 0px 10px;line-height: 40px;text-align: right;">
                {{dialogData.detail.storagePer}}%
              </div>
            </el-col>
            <el-col :span="3" style="padding: 0px 0px 0px 0px;">
              <div style="padding: 0px 10px 0px 10px;line-height: 40px;text-align: center;cursor:pointer;">
                <i class="el-icon-user"></i>
              </div>
            </el-col>
          </el-row>
          <el-row style="height: 40px">
            <el-col :span="13" style="padding: 0px 10px 0px 20px;line-height: 40px;">
              <div style="display: inline-block;background-color: #fd6865;border-radius: 10px;width: 8px;height: 8px"></div>
              <span style="margin-left: 10px">流失</span>
            </el-col>
            <el-col :span="4" style="padding: 0px 0px 0px 0px;">
              <div style="padding: 0px 10px 0px 10px;line-height: 40px;text-align: right;">
                {{dialogData.detail.wastageNum}}
              </div>
            </el-col>
            <el-col :span="4" style="padding: 0px 0px 0px 0px;">
              <div style="padding: 0px 10px 0px 10px;line-height: 40px;text-align: right;">
                {{dialogData.detail.wastagePer}}%
              </div>
            </el-col>
            <el-col :span="3" style="padding: 0px 0px 0px 0px;">
              <div style="padding: 0px 10px 0px 10px;line-height: 40px;text-align: center;cursor:pointer;">
                <i class="el-icon-user"></i>
              </div>
            </el-col>
          </el-row>
        </div>

        <!--表格头-->
        <div>
          <el-row style="margin-top:20px;background-color: #f7f9fa!important;height: 40px;border-bottom:2px solid #e0e6ed">
            <el-col :span="6" style="height: 20px;padding: 0px 10px 10px 20px;line-height: 50px;">
              后续事件
            </el-col>
            <el-col :span="4" style="height: 20px;padding: 0px 0px 10px 0px;">
              <div style="padding: 0px 10px 0px 10px;line-height: 50px;text-align: right;">
                分组值
              </div>
            </el-col>
            <el-col :span="5" style="height: 20px;padding: 0px 0px 10px 0px;">
              <div style="padding: 0px 10px 0px 10px;line-height: 50px;text-align: right;">
                会话数
              </div>
            </el-col>
            <el-col :span="5" style="height: 20px;padding: 0px 0px 10px 0px;">
              <div style="padding: 0px 10px 0px 10px;line-height: 50px;text-align: center;">
                比例
              </div>
            </el-col>
            <el-col :span="4" style="height: 20px;padding: 0px 0px 10px 0px;">
              <div style="padding: 0px 10px 0px 10px;line-height: 50px;text-align: center;">
                操作
              </div>
            </el-col>
          </el-row>
        </div>

        <!--表格内容-->
        <template v-for="(item) in dialogData.table">
          <div>
            <el-row style="height: 40px;border-bottom:1px solid #e0e6ed">
              <el-col :span="6" style="height: 20px;padding: 0px 10px 10px 20px;line-height: 50px;">
                <div style="white-space: nowrap;overflow: hidden;text-overflow: ellipsis;" :title="item.lineText.substring(item.lineText.indexOf('到')+1)">
                  {{item.lineText.substring(item.lineText.indexOf('到')+1)}}
                </div>
              </el-col>
              <el-col :span="4" style="height: 20px;padding: 0px 0px 10px 0px;">
                <div style="padding: 0px 10px 0px 10px;line-height: 50px;text-align: right;">
                  无
                </div>
              </el-col>
              <el-col :span="5" style="height: 20px;padding: 0px 0px 10px 0px;">
                <div style="padding: 0px 10px 0px 10px;line-height: 50px;text-align: right;">
                  {{item.valueShow}}
                </div>
              </el-col>
              <el-col :span="5" style="height: 20px;padding: 0px 0px 10px 0px;">
                <div style="padding: 0px 10px 0px 10px;line-height: 50px;text-align: center;">
                  {{item.sourcePre}}%
                </div>
              </el-col>
              <el-col :span="4" style="height: 20px;padding: 0px 0px 10px 0px;">
                <div style="padding: 0px 10px 0px 10px;line-height: 50px;text-align: center;cursor:pointer;">
                  <i class="el-icon-user"></i>
                </div>
              </el-col>
            </el-row>
          </div>
        </template>


      </div>
    </div>

  </el-dialog>

</template>

<script>
import {events} from "../spreadAnalysis/spread.config";

export default {
  name: "userDate",
  props:{
    dialogData:{
      type:Object
    },
    dialogVisible:{
      type:Boolean,
      default: true
    }
  },
  data() {
    return {
    };
  },
  mounted() {
  },
  methods: {

  },
  watch: {
    dialogVisible: function (val,oldVal) {
      this.$emit("changeStateDialog", val, oldVal);
    }
  },
};
</script>

<style lang="scss" scoped>
  .ant-modal-body {
    padding: 12px;
    font-size: 14px;
    line-height: 1.5;
    word-wrap: break-word;
  }

  .border-left_line{
    border-left: 1px solid #e9f0f7;
    border-left-width: 1px;
    border-left-style: solid;
    border-left-color: rgb(233, 240, 247);
  }
  .border-bottom_line{
    border-bottom-width: 1px;
    border-bottom-style: solid;
    border-bottom-color: rgb(233, 240, 247);
  }

</style>
